<template>
  <div id="dp_l" >
    <div class="d_top" >
      <div class="sjdate" >{{ nowDate }}<span class="mrg_15" >{{ nowTime }}</span></div>
      <div class="d_t_title" >
        <div class="d_t_twz" >领导驾驶舱</div>
      </div>
      <div class="day" ></div>
      <div class="sybtn" @click="ckjrxt" ><div class="wzys" >首页</div></div>
      <div class="xtbtn" @click="logout" ><div class="wzys" >退出</div></div>

    </div>
    <div>
      <div class="nr1" >
        <img src="../../assets/images/bigscreen/yszl.png" class="d_l_img" >
        <img src="../../assets/images/bigscreen/lyxs.png" class="d_l_img" style="top: 160px;"  >
        <div class="nr_text" >三条红线监管</div>
        <div class="stx_l" >
          <div class="s_l_value" >3356.23<span>万m³</span></div>
          <div class="s_l_title" >用水总量</div>
        </div>
        <div class="stx_l" style="top: 177px;" >
          <div class="s_l_value" >56.81<span style="margin-left:5px; font-size: 14px; " >%</span></div>
          <div class="s_l_title" >灌溉水利用系数</div>
        </div>

        <div class="stx_r" >
          <div class="s_l_value" >306.11<span>万m³</span></div>
          <div class="s_l_title" >地表用水</div>
        </div>
        <div class="stx_r" style="left: 414px;" >
          <div class="s_l_value" >118.96<span>万m³</span></div>
          <div class="s_l_title" >地下用水</div>
        </div>

        <div class="stx_r" style="top: 181px;" >
          <div class="s_l_value" >518.23<span>万m³</span></div>
          <div class="s_l_title" >取水量</div>
        </div>
        <div class="stx_r" style="top: 181px; left: 414px;" >
          <div class="s_l_value" >634.19<span>万m³</span></div>
          <div class="s_l_title" >引水量</div>
        </div>

      </div>
      <div class="nr2" >
        <div class="nr_text" style="top: 10px;"  >计量体系监管</div>
        <div class="bar_title" >用水</div>
        <div class="bar_title" style="top: 287px;" >取水</div>
        <div class="bfb_x" >
          <div class="bx_bor" ></div>
          <div class="bx_bor" style="left: 20px; top: 111px; width: 98px; height: 119px;" ></div>
          <div class="bx_bor" style="left: 33px; top: 126px; width: 84px; height: 104px;" ></div>
          <div class="bx_bor" style="left: 46px; top: 141px; width: 70px; height: 89px;" ></div>
          <div class="bx_bor" style="left: 59px; top: 158px; width: 57px; height: 72px;" ></div>
          <div class="bx_bor" style="left: 72px; top: 175px; width: 43px; height: 55px;" ></div>
          <div class="bx_bor" style="left: 85px; top: 191px; width: 31px; height: 39px;" ></div>
          <div class="bx_bor" style="left: 98px; top: 206px; width: 18px; height: 23px;" ></div>
          <div class="bx_bor" style="left: 111px; top: 222px; width: 6px; height: 7px;" ></div>
        </div>
        <div class="bfb_title" >
          <ul>
            <li>17.23%</li>
            <li>11.06%</li>
            <li>8.18%</li>
            <li>46.11%</li>
            <li>19.29%</li>
            <li>22.56%</li>
            <li>19.93%</li>
            <li>21.44%</li>
            <li>27,11%</li>
          </ul>
        </div>
        <div class="bfb_value" >
          <ul>
            <li>雨量站</li>
            <li>河（渠）道水情站</li>
            <li>地下水情站</li>
            <li>水量站</li>
            <li>水质站</li>
            <li>墒情站</li>
            <li>安全站</li>
            <li>视频图像展</li>
            <li>其他站</li>
          </ul>
        </div>
        <div id="txbfb" ></div>
        <div id="ysbar" ></div>
        <div id="qsbar" ></div>
      </div>
      <div class="nr3" >
        <div class="nr_text" style="top: 10px;" >终端水价监管</div>
        <div class="zw1" ></div>
        <div class="zw2" ></div>
        <table class="zdsj" >
          <tr>
            <td>
              <div class="t_d_sj" >3.18<span>元</span></div>
              <div class="t_d_title" >目标水价</div>
            </td>
            <td>
              <div class="t_d_sj" >4.00<span>元</span></div>
              <div class="t_d_title" >实际水价</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="t_d_sj" >2.19<span>元</span></div>
              <div class="t_d_title" >引水推算水价</div>
            </td>
            <td>
              <div class="t_d_sj" >2.81<span>元</span></div>
              <div class="t_d_title" >用水推算水价</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="nr4" >
        <div class="nr_text" style="top: 10px;" >水费计收监管</div>
        <div class="nr_t_dw" >单位：万元</div>
        <img src="../../assets/images/bigscreen/ysss_t.png" class="ysss_img" >
        <img src="../../assets/images/bigscreen/ysss_t.png" class="ysss_img" style="top:343px;"  >
        <div class="sfjs_title" style="margin-top: 60px;" >各机构应收实收水费对比柱状图</div>
        <div id="ysssbar" ></div>
        <div class="sfjs_title" >各机构水费征收率</div>
        <div id="phbar" ></div>
      </div>
      <div class="nr5" >
        <div class="nr_text" style="top: 10px;" >监测数据畅通率</div>
        <div id="dbstjl" ></div>
      </div>

      <div class="c_nr" >
        <div class="zgg_img" >
          <div class="c_n_value" >235.11</div>
          <div class="c_n_title" >总灌溉面积</div>
        </div>
        <div class="zgg_img" style="left: 805px;"  >
          <div class="c_n_value" >117.23</div>
          <div class="c_n_title" >渠道总长度</div>
        </div>
        <div class="zgg_img" style="left: 999px;"  >
          <div class="c_n_value" >50</div>
          <div class="c_n_title" >闸口建设</div>
        </div>
        <div class="zgg_img" style="left: 1199px;"  >
          <div class="c_n_value" >108.04</div>
          <div class="c_n_title" >水价改革设计面</div>
        </div>
        <img src="../../assets/images/bigscreen/dt.png" class="dtimg" >
        <div class="dt_bz" >
          <div class="bz_gqk" ></div>
          <div class="bz_zqk" ></div>
          <div class="bz_dqk" ></div>
          <div class="bz_qdwz" >干渠</div>
          <div class="bz_qdwz" style=" top: 523px; " >支渠</div>
          <div class="bz_qdwz" style=" top: 546px; " >斗渠</div>
        </div>
        <div class="dttsk" >
          <div class="dt_title" ><span>渠道名称</span></div>
          <div>
            <div class="qdinfo" >
              <div class="d_info_v" >345.12</div>
              <div>渠道长度</div>
            </div>
            <div class="qdinfo" >
              <div class="d_info_v" >245.11</div>
              <div>灌溉面积</div>
            </div>
          </div>
        </div>

      </div>


    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import {
  statTypeByRatio,listBigScreenStationDataWzl,listBigScreenWaterSumPlayVo,listCountWaterStation,listOrgReceivablePaidWaterFees,listOrgWaterFeeCollectionRate,listChannelSetData,listAnnualTaskProgress
} from "@/api/bigScreen/bigScreen";
import { listAllWiOrganB } from "@/api/datam/WiOrganB"
export default {
  name: 'index',
  data() {
    return {
      // 查询参数
      queryParams: {
        orgCd: 'ORG6543220000'
      },
      bfbTitleList: [],
      bfbValveList: [],
      statTypeList: [],
      stationDataWzlList:[],
      //三条红线
      threeRedLines: {
        kZunderWaterSum: 0,
        kZsurfaceWaterSum: 0,
        kZwaterSum: 0,
        dNunderWaterSum: 0,
        dNsurfaceWaterSum: 0,
        dNwaterSum: 0,
        targetWaterPrice: 0,
        actualWaterPrice: 0,
        diversionWaterPrice: 0,
        usingWaterPrice:0
      },
      //测站在线离线数
      waterStation: {
        reportRegimeNum: 0,
        faultRegimeNum: 0,
        reportYieldNum: 0,
        faultYieldNum: 0,
        reportImageNum: 0,
        faultImageNum: 0,
      },
      orgReceivablePaidWaterFees:{

      },
      //渠道数据
      channelSetData: {
        totalIrrigationArea: 0,
        totalLengthChannel: 0,
        gateConstruction: 0,
        designWaterPriceReform: 0
      },
      orgOption:[],
      orgCd:"",
      gdbtn:false,
      timer: "",
      nowWeek: "",
      nowDate: "",
      nowTime: "",
    };
  },
  mounted(){
    this.formatNumber(567340009);
    this.getTime();
    this.initysqsChat();
    this.initradiusbar();
    this.initChart();
    this.initchart_sfjs();
    this.initchart_zsl();
    this.getBigScreenStationDataWzlList();
    this.getStatTypeByRatio();
    this.getBigScreenWaterSumPlayVo();
    this.getCountWaterStation();
    this.getAllWiOrganB();
    this.getChannelSetData();
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer);
    }
  },
  methods: {

    getChannelSetData() {
      this.loading = true;
      listChannelSetData().then((response) => {
        const pd = response.data;
        this.channelSetData.totalIrrigationArea = pd.totalIrrigationArea;
        this.channelSetData.totalLengthChannel = pd.totalLengthChannel;
        this.channelSetData.gateConstruction = pd.gateConstruction;
        this.channelSetData.designWaterPriceReform = pd.designWaterPriceReform;
      });
    },
    getAllWiOrganB(){
      this.loading = true;
      listAllWiOrganB().then((response) => {
        // let arr =response.rows.slice(1);
        let arr =response.rows;
        this.orgCd = arr[0].orgCd
        this.orgOption=arr
        this.getAnnualTaskProgressList(this.orgOption[0].orgCd);
        // this.getOrgReceivablePaidWaterFees(this.orgOption[0].orgCd);
      });
    },
    getOrgInfo(row){
      this.loading = true;
      console.log(row)
      this.getAnnualTaskProgressList(row);
      /*this.getOrgReceivablePaidWaterFees(row);*/
      // this.orgReceivablePaidWaterFees.forEach(item => {
      //   if (item.orgCd == row){
      //     this.initchart_sfjs(item);
      //   }
      // })
    },
    // getOrgWaterFeeCollectionRate(){
    //   listOrgWaterFeeCollectionRate().then((response) => {
    //     this.loading = true;
    //     const orgRateList = response.data.slice(1);
    //     const orgNmList = [];
    //     const rateList = [];
    //     for (let i = 0; i < orgRateList.length; i++) {
    //       orgNmList.push(orgRateList[i].orgNm);
    //       rateList.push(orgRateList[i].rate);
    //     }
    //     this.initchart_zsl(orgNmList,rateList);
    //   })
    // },
    /**查询测站在线离线数*/
    getCountWaterStation(){
      this.loading = true;
      listCountWaterStation().then((response) => {
        const pd = response.data;
        this.waterStation.reportRegimeNum = pd.reportRegimeNum;
        this.waterStation.faulRegimeNum = pd.faulRegimeNum;
        this.waterStation.reportYieldNum = pd.reportYieldNum;
        this.waterStation.faultYieldNum = pd.faultYieldNum;
        this.waterStation.reportImageNum =pd.reportImageNum;
        this.waterStation.faultImageNum =pd.faultImageNum;
        this.initysqsChat(this.waterStation.reportRegimeNum, this.waterStation.faulRegimeNum, this.waterStation.reportYieldNum,this.waterStation.faultYieldNum,  this.waterStation.reportImageNum, this.waterStation.faultImageNum);
      });
    },
    // /**获取机构应收实收水费*/
    // getOrgReceivablePaidWaterFees(orgCd){
    //   this.loading = true;
    //   listOrgReceivablePaidWaterFees().then((response) => {
    //     const pd = response.data;
    //     this.orgReceivablePaidWaterFees=pd;
    //     pd.forEach(item => {
    //       if (item.orgCd == orgCd){
    //         this.initchart_sfjs(item);
    //       }
    //     })
    //   });
    // },
    /**查询三条红线*/
    getBigScreenWaterSumPlayVo(){
      this.loading = true;
      listBigScreenWaterSumPlayVo().then((response) => {
        const pd = response.data;
        this.threeRedLines.kZunderWaterSum = pd.kZunderWaterSum;
        this.threeRedLines.kZsurfaceWaterSum = pd.kZsurfaceWaterSum;
        this.threeRedLines.kZwaterSum = pd.kZwaterSum;
        this.threeRedLines.dNsurfaceWaterSum = pd.dNsurfaceWaterSum;
        this.threeRedLines.dNunderWaterSum = pd.dNunderWaterSum;
        this.threeRedLines.dNwaterSum = pd.dNwaterSum;
        this.threeRedLines.targetWaterPrice = pd.targetWaterPrice;
        this.threeRedLines.actualWaterPrice = pd.actualWaterPrice;
        this.threeRedLines.diversionWaterPrice = pd.diversionWaterPrice;
        this.threeRedLines.usingWaterPrice = pd.usingWaterPrice;
      });
    },
    /** 查询行政区划登记列表 */
    getStatTypeByRatio() {
      this.loading = true;
      statTypeByRatio(this.queryParams).then((response) => {
        const statTypeList = response.data;
        this.bfbTitleList=response.data;
        const wzlist= [];
        const wzcountlist= [];
        for (let i = 0; i < statTypeList.length; i++) {
          // wzlist.push(name+":"+statTypeList[i].dictLabel);
          // wzcountlist.push(value+":"+statTypeList[i].statTypeSum);
          if (statTypeList[i].statTypeSum===0){
          }else {
            wzlist.push({
              "value":statTypeList[i].statTypeSum,
              "name":statTypeList[i].dictLabel
            })
          }
          // wzlist.push({
          //   type: 'pie',
          //   data: [statTypeList[i].statTypeSum],
          //   coordinateSystem: 'polar',
          //   name: statTypeList[i].dictLabel,
          //   itemStyle: {
          //     opacity: 0.8,
          //     borderRadius: 10,
          //     borderWidth: 1
          //   }
          // }
          // );
        }
        console.log(wzlist)
        this.initradiusbar(wzlist);
        this.loading = false;
      });
    },



    getBigScreenStationDataWzlList(){
      this.loading = true;
      this.queryParams.orgCd='ORG6543220000'
      listBigScreenStationDataWzl(this.queryParams).then((response) => {
        const stationDataWzlList = response.data;
        const orgNmList = [];
        const yblist = [];
        const sblist = [];
        const ctl = [];
        for (let i = 0; i < stationDataWzlList.length; i++) {
          orgNmList.push(stationDataWzlList[i].orgNm);
          yblist.push(stationDataWzlList[i].ybCount);
          sblist.push(stationDataWzlList[i].sbCount);
          ctl.push(stationDataWzlList[i].integrityRate);
        }
        this.initChart(orgNmList,yblist,sblist,ctl);
        this.loading = false;

      });
    },
    initysqsChat(){
      var echarts = require('echarts');
      let ysinit = echarts.init(document.getElementById('ysbar'));

      ysinit.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color:["#0599e6","#e39c0d"],
        series: [
          {
            name: '用水',
            type: 'pie',
            radius: [30, 40],
            center: ['50%', '50%'],
            label:{
              color:"#fff"
            },
            itemStyle: {
              borderRadius: 3
            },
            data: [
              { value: 63.12, name: '在线' },
              { value: 36.88, name: '离线' },
            ]
          }
        ]
      });

      let qsinit = echarts.init(document.getElementById('qsbar'));
      qsinit.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color:["#6fbd50","#c85329"],
        series: [
          {
            name: '取水',
            type: 'pie',
            radius: [30, 40],
            center: ['50%', '50%'],
            label:{
              color:"#fff",
            },
            itemStyle: {
              borderRadius: 3,
            },
            data: [
              { value: 89.16, name: '在线' },
              { value: 10.84, name: '离线' },
            ]
          }
        ]
      });


    },
    initradiusbar(){
      var echarts = require('echarts');
      let einitrbar = echarts.init(document.getElementById('txbfb'));

      einitrbar.setOption({
        angleAxis: {
          max: 200,
          startAngle: 0,
          splitLine: {
            show: false
          },
          axisLabel:{ show:false },
          axisLine:{ show:false },
          axisTick:{ show:false },
        },
        color:["#35bc7b","#dd9f55","#4b76e0","#caed67","#ea5ded","#e8d7a3","#4eeff7","#dd6a5b","#9663f8"],
        radiusAxis: {
          type: 'category',
          axisLabel:{ show:false },
          axisLine:{ show:false },
          axisTick:{ show:false },
        },
        polar: {
          radius: [0, '100%']
        },
        series: [
          {
            type: 'bar',
            data: [57.11],
            coordinateSystem: 'polar',
            name: '其他站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [61.44],
            coordinateSystem: 'polar',
            name: '视频图像展',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [30.93],
            coordinateSystem: 'polar',
            name: '安全站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [20.56],
            coordinateSystem: 'polar',
            name: '墒情站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [40.29],
            coordinateSystem: 'polar',
            name: '水质站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [20.11],
            coordinateSystem: 'polar',
            name: '水量站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [30],
            coordinateSystem: 'polar',
            name: '地下水情站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [11.06],
            coordinateSystem: 'polar',
            name: '河（渠）道水情站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
          {
            type: 'bar',
            data: [80.23],
            coordinateSystem: 'polar',
            name: '雨量站',
            itemStyle: {
              opacity: 0.8,
              borderRadius: 10,
              borderWidth: 1
            }
          },
        ],
      });

    },
    initChart(orgNmList,yblist,sblist,ctl){
      var echarts = require('echarts');
      let einit = echarts.init(document.getElementById('dbstjl'));

      einit.setOption({
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '20%',
            left: '0%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          color:['#3f69fd','#bff76f','#d545f8'],
          legend: {
            data: ['应报', '实报', '畅通率'],
            textStyle :{
              color: '#fff'
            },
            itemGap:50
          },
          xAxis: [
            {
              type: 'category',
              data: orgNmList,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval:0,
                show: true,
                textStyle: {
                  color: '#f9eeee'
                }
              },
              axisLine:{
                show: true,
                lineStyle:{
                  color:'#f9eeee',
                  width:1,//这里是为了突出显示加上的
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#f9eeee',
                  width:1,//这里是为了突出显示加上的
                }
              },
              splitLine: {
                show: true,
                lineStyle:{
                  color:'#16203b',
                  width: 1,
                  type: 'solid'
                }
              },
            },
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              },
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#f9eeee',
                  width:1,//这里是为了突出显示加上的
                }
              },
              splitLine: {
                show: true,
                lineStyle:{
                  color:'#16203b',
                  width: 1,
                  type: 'solid'
                }
              },
            }
          ],
          series: [
            {
              name: '应报',
              type: 'bar',
              barGap: 0,
              tooltip: {
                valueFormatter: function (value) {
                  return value ;
                }
              },
              itemStyle: {
                barBorderRadius: [5,5,0,0],
              },
              data:
              yblist

            },
            {
              name: '实报',
              type: 'bar',
              barGap: 0,
              itemStyle: {
                barBorderRadius: [5,5,0,0],
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value ;
                }
              },
              data:
              sblist

            },
            {
              name: '畅通率',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' %';
                }
              },
              data: ctl
            }
          ]
        }
      );


    },
    // initChart(){
    //   var echarts = require('echarts');
    //   let einit = echarts.init(document.getElementById('dbstjl'));
    //
    //   einit.setOption({
    //       tooltip: {
    //         trigger: 'axis',
    //       },
    //       grid: {
    //         top: '20%',
    //         left: '0%',
    //         right: '1%',
    //         bottom: '1%',
    //         containLabel: true
    //       },
    //       color:['#3f69fd','#bff76f','#d545f8'],
    //       legend: {
    //         data: ['应报', '实报', '畅通率'],
    //         textStyle :{
    //           color: '#fff'
    //         },
    //         itemGap:50
    //       },
    //       xAxis: [
    //         {
    //           type: 'category',
    //           data: ['机构1', '机构2', '机构3','机构4','机构5','机构6','机构7','机构8','机构9','机构10','机构11', '机构12', '机构13','机构14','机构15','机构16','机构17','机构18','机构19','机构20'],
    //           axisPointer: {
    //             type: 'shadow'
    //           },
    //           axisLabel: {
    //             show: true,
    //             textStyle: {
    //               color: '#f9eeee'
    //             }
    //           },
    //           axisLine:{
    //             show: true,
    //             lineStyle:{
    //               color:'#f9eeee',
    //               width:1,//这里是为了突出显示加上的
    //             }
    //           },
    //         }
    //       ],
    //       yAxis: [
    //         {
    //           type: 'value',
    //           axisLabel: {
    //             formatter: '{value}'
    //           },
    //           axisLine: {
    //             show: true,
    //             lineStyle:{
    //               color:'#f9eeee',
    //               width:1,//这里是为了突出显示加上的
    //             }
    //           },
    //           splitLine: {
		// 						show: true,
		// 						lineStyle:{
		// 						   color:'#16203b',
		// 						   width: 1,
		// 						   type: 'solid'
		// 					  }
    //       　　},
    //         },
    //         {
    //           type: 'value',
    //           axisLabel: {
    //             formatter: '{value} %'
    //           },
    //           axisLine: {
    //             show: true,
    //             lineStyle:{
    //               color:'#f9eeee',
    //               width:1,//这里是为了突出显示加上的
    //             }
    //           },
    //           splitLine: {
		// 						show: true,
		// 						lineStyle:{
		// 						   color:'#16203b',
		// 						   width: 1,
		// 						   type: 'solid'
		// 					  }
    //       　　},
    //         }
    //       ],
    //       series: [
    //         {
    //           name: '应报',
    //           type: 'bar',
    //           barGap: 0,
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value ;
    //             }
    //           },
    //           itemStyle: {
    //             barBorderRadius: [5,5,0,0],
    //           },
    //           data: [
    //             2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 76.7, 135.6, 23.2, 25.6, 76.7, 135.6, 32.6, 25.6, 76.7, 135.6, 162.2, 20.0, 6.4, 3.3
    //           ]
    //         },
    //         {
    //           name: '实报',
    //           type: 'bar',
    //           barGap: 0,
    //           itemStyle: {
    //             barBorderRadius: [5,5,0,0],
    //           },
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value ;
    //             }
    //           },
    //           data: [
    //             2.6, 5.9, 9.0, 26.4, 182.2, 48.7, 18.8, 28.7, 25.6, 76.7, 135.6, 32.6, 25.6,70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
    //           ]
    //         },
    //         {
    //           name: '畅通率',
    //           type: 'line',
    //           yAxisIndex: 1,
    //           tooltip: {
    //             valueFormatter: function (value) {
    //               return value + ' %';
    //             }
    //           },
    //           data: [2.0, 2.2, 3.3, 4.5, 6.3, 20.3, 23.4, 23.0, 16.5, 12.0, 10.2, 20.3, 23.0, 16.5, 12.0, 23.4, 23.0, 16.5, 12.0, 6.2]
    //         }
    //       ]
    //     }
    //   );
    //
    //
    // },
    initchart_sfjs(){
      var echarts = require('echarts');
      let einit2 = echarts.init(document.getElementById('ysssbar'));

      einit2.setOption({
        tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '5%',
            left: '1%',
            right: '1%',
            bottom: '4%',
            containLabel: true
          },
          color:['#b1f657','#ff722c'],
          xAxis: [
            {
              type: 'category',
              data: ['01', '02', '03','04','05','06','07','08','09','10','11','12'],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#f9eeee'
                }
              },
              axisLine:{
                show: true,
                lineStyle:{
                  color:'#f9eeee',
                  width:1,//这里是为了突出显示加上的
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#f9eeee',
                  width:1,//这里是为了突出显示加上的
                }
              },
              splitLine: {
								show: false,
          　　},
            }
          ],
          series: [
            {
              name: '应收',
              type: 'bar',
              barGap: 0,
              tooltip: {
                valueFormatter: function (value) {
                  return value ;
                }
              },
              itemStyle: {
                barBorderRadius: [4,4,0,0],
              },
              data: [
              135.6, 162.2, 76.7,77.0, 24.9, 7.0, 23.2, 25.6, 76.7,  135.6, 23.2, 25.6, 76.7, 135.6, 32.6, 25.6, 76.7, 135.6, 162.2, 20.0, 6.4, 3.3
              ]
            },
            {
              name: '实收',
              type: 'bar',
              barGap: 0,
              itemStyle: {
                barBorderRadius: [4,4,0,0],
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value ;
                }
              },
              data: [
              18.8, 28.7, 25.6, 62.6, 45.9, 29.0, 26.4, 182.2, 48.7,  76.7, 135.6, 32.6, 25.6,70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            }
          ]
      });


    },
    initchart_zsl(){
      var echarts = require('echarts');
      let einit3 = echarts.init(document.getElementById('phbar'));

      let colorarr = ['#1847FE','#584AFC','#6A5DFC','#5B85FC','#5A87FC','#52D07B','#7ECD45','#DEA933','#FF7A42','#FF4474']

      einit3.setOption({
        xAxis: {
          show: false,
          max: 'dataMax',
          splitLine: {
            show: false,
      　　},
        },
        grid: {
            top: '1%',
            left: '1%',
            right: '10%',
            bottom: '0%',
            containLabel: true
          },
        yAxis: {
          type: 'category',
          data: ['机构1', '机构2', '机构3','机构4','机构5','机构6','机构7','机构8','机构9','机构10'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#f9eeee'
            }
          },
          axisTick: { show: false },
          axisLine:{
            show: false,
            lineStyle:{
              color:'#f9eeee',
              width:1,//这里是为了突出显示加上的
            }
          },
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',

            data: [91.23,88.02,87.09,86.81,84.02,82.91,80.11,62.17,52.34,46.18],
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}%',
              color: '#fff',
            },
            itemStyle: {
              color: function (param) {
                return colorarr[param.dataIndex]+'' || '#5470c6';
              },
              barBorderRadius: [0,2,2,0],
            },
          }
        ],
      });

    },
    ckjrxt(){
        const link = "/index";
        window.open(link, '_blank');
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login';
        })
      }).catch(() => {});
    },
    formatNumber(num){
        return num.toString().replace(/\d+/,function(n){
          return n.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
        });
    },
    sizeChange(size) {

    },
    getTime() {
      this.timer = setInterval(() =>{
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth()+1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;

        this.nowDate =  `${year}-${mounth}-${day}`;
        this.nowTime =  `${hours}:${minutes}:${seconds}`;

      },1000);
    },
  },
};
</script>

<style scoped lang="scss">
  @import url('../../assets/css/font.css');

  #dp_l{
    min-width: 1920px;
    min-height: 1080px;
    background-image: url("../../assets/images/bigscreen/bs_bimg.png");
    background-size: auto;

    .dp_title{
      position: absolute;
      left: 45px;
      top: 130px;
      width: 410px;
      height: 40px;
      line-height: 38px;
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 1px;
      color: #fff;
    }

    .nr1{
      position: absolute;
      left: 21px;
      top: 129px;
      width: 524px;
      height: 248px;
      background-image: url("../../assets/images/bigscreen/k_n1.png");
      background-size: auto;
    }

    .nr2{
      position: absolute;
      left: 21px;
      top: 389px;
      width: 524px;
      height: 382px;
      background-image: url("../../assets/images/bigscreen/k_n2.png");
      background-size: auto;
    }

    .nr3{
      position: absolute;
      left: 1376px;
      top: 130px;
      width: 524px;
      height: 295px;
      background-image: url("../../assets/images/bigscreen/k_n3.png");
      background-size: auto;
    }

    .nr4{
      position: absolute;
      left: 1376px;
      top: 435px;
      width: 524px;
      height: 625px;
      background-image: url("../../assets/images/bigscreen/k_n4.png");
      background-size: auto;
    }

    .nr5{
      position: absolute;
      left: 21px;
      top: 781px;
      width: 1343px;
      height: 279px;
      background-image: url("../../assets/images/bigscreen/k_n5.png");
      background-size: auto;
    }

    .zgg_img{
      position: absolute;
      left: 612px;
      top: 139px;
      width: 100px;
      height: 52px;
      text-align: center;
      background-image: url("../../assets/images/bigscreen/zggmj_img.png");

      background-repeat: no-repeat;
      background-position: 10px;

      .c_n_value{
        color: #fff;
        width: 100px;
        font-size: 30px;
        line-height: 25px;
        font-family: "digital-7";
      }

      .c_n_title{
        width: 100px;
        margin-top:26px;
        font-size: 12px;
        color: #f1f1f1;
      }
    }

    .nr_text{
      position: absolute;
      left: 55px;
      top: 10px;
      width: 435px;
      font-weight: 800;
      font-size: 28px;
      letter-spacing: 4px;
      height: 40px;
      background-image: linear-gradient(#daf3fc, #daf3fc, #00a0ff);
      background-clip: text;
      color: transparent;
    }

    .bar_title{
      position: absolute;
      left: 389px;
      top: 130px;
      font-weight: 800;
      font-size: 18px;
      background-image: linear-gradient(#daf3fc, #daf3fc, #00a0ff);
      background-clip: text;
      color: transparent;
    }

    .zdsj{
      margin-top: 66px;
      width: 100%;
      height: 227px;
      text-align: center;
      color:#f1f1f1;
      .t_d_sj{
        font-size: 38px;
        height: 37px;
        letter-spacing: 2px;
        font-family: "digital-7";
        span{
          font-size: 12px;
        }
      }
      .t_d_title{
        color:#a7c5ec;
      }
    }

    .zw1{
      position: absolute;
      left: 18px;
      top: 179px;
      width: 491px;
      height: 1px;
      border-top: 1px solid #1f2535;
    }
    .zw2{
      position: absolute;
      left: 264px;
      top: 84px;
      width: 1px;
      height: 196px;
      border-right: 1px solid #1f2535;
    }

    .stx_l{
      position: absolute;
      left: 96px;
      top: 85px;
      width: 190px;
      line-height: 25px;
      height: 66px;
      .s_l_value{
        font-size: 34px;
        color: #fff;
        letter-spacing: 2px;
        font-family: "digital-7";
        span{
          font-size: 12px;
        }
      }
      .s_l_title{
        font-size: 14px;
        color: #a7c5ec;
      }
    }

    .stx_r{
      position: absolute;
        left: 291px;
        top: 89px;
        width: 110px;
        line-height: 24px;
        height: 53px;

      .s_l_value{
        font-size: 25px;
        color: #80d3f0;
        letter-spacing: 2px;
        font-family: "digital-7";
        span{
          font-size: 12px;
          color: #fff;
        }
      }
      .s_l_title{
        font-size: 14px;
        color: #a7c5ec;
      }
    }

    .nr_t_dw{
      position: absolute;
      left: 445px;
      top: 71px;
      width: 70px;
      font-size: 12px;
      color: #f1f1f1;
    }

  }

  .d_top{
    position: relative;

    .sybtn{
      position: absolute;
      left: 107px;
      top: 63px;
      width: 128px;
      height: 50px;
      line-height: 48px;
      text-align: center;
      font-weight: 800;
      font-size: 22px;
      color: #fff;
      cursor:pointer;
      background-image: url("../../assets/images/bigscreen/sy_btn.png");
      background-size: auto;
    }

    .wzys{
      background-image: linear-gradient(#daf3fc, #daf3fc, #0da4fc);
      background-clip: text;
      color: transparent;
    }

    .xtbtn{
      position: absolute;
      left: 1686px;
      top: 63px;
      width: 128px;
      height: 50px;
      line-height: 48px;
      text-align: center;
      font-weight: 800;
      font-size: 22px;
      color: #fff;
      cursor:pointer;
      background-image: url("../../assets/images/bigscreen/tc_btn.png");
      background-size: auto;
    }

    .d_t_title{
      position: absolute;
      left: 176px;
      top: 0px;
      width: 1567px;
      height: 106px;
      background-image: url("../../assets/images/bigscreen/bs_top_bimg.png");
      background-size: auto;
    }


    .sjdate{
      position: absolute;
      left: 35px;
      top: 3px;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      color: #fff;
      //font-family: "digital-7";
    }



  }

    .d_l_img{
      position: absolute;
      left: 14px;
      top: 71px;
      width: 68px;
    }

    .ysss_img{
      position: absolute;
      left: 19px;
      top: 68px;
      width: 24px;
    }

    .dtimg{
      position: absolute;
      left: 677px;
      top: 230px;
      width: 589px;
    }

    .dttsk{
      position: absolute;
      left: 633px;
      top: 265px;
      width: 229px;
      height: 128px;
      background-image: url("../../assets/images/bigscreen/dt_tsk.png");
      background-size: auto;
      z-index: 4;
    }

    .bz_gqk{
      position: absolute;
      left: 675px;
      top: 504px;
      width: 28px;
      height: 10px;
      background:#8cc9ff;
      z-index: 4;
    }

    .bz_zqk{
      position: absolute;
      left: 675px;
      top: 529px;
      width: 28px;
      height: 4px;
      background:#7298ff;
      z-index: 4;
    }

    .bz_dqk{
      position: absolute;
      left: 675px;
      top: 555px;
      width: 28px;
      height: 1px;
      background:#3fdbe7;
      z-index: 4;
    }

    .bz_qdwz{
      position: absolute;
      left: 711px;
      top: 501px;
      width: 30px;
      height: 20px;
      font-size: 12px;
      z-index: 4;
      color: #b4bfec;
    }

    .dt_title{
      font-size: 17px;
      font-weight: 800;
      margin-left: 14px;
      margin-top: 13px;
      width: 109px;
      height: 30px;
      span{
        background-image: linear-gradient(#daf3fc, #daf3fc, #0da4fc);
        background-clip: text;
        color: transparent;
      }
    }

    .qdinfo{
      display: inline-block;
      font-size: 12px;
      width: 77px;
      margin-top: 20px;
      padding-left: 26px;
      color: #fff;
      .d_info_v{
        font-size: 20px;
        color: #fff82d;
        font-family: "digital-7";
      }
    }


    #dbstjl{
      position: absolute;
      top: 24px;
      left: 0px;
      width: 1343px;
      height: 248px;
    }

    #ysbar{
      position: absolute;
      top: 64px;
      left: 296px;
      width: 220px;
      height: 160px;
      z-index: 3;
    }

    #qsbar{
      position: absolute;
      top: 220px;
      left: 296px;
      width: 220px;
      height: 160px;
      z-index: 3;
    }

    #txbfb{
      position: absolute;
      top: 90px;
      left: -11px;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      width: 282px;
      height: 282px;
      z-index: 3;
    }

    .bfb_title{
      position: absolute;
      top: 75px;
      left: 85px;
      line-height: 16px;
      font-size: 13px;
      color: #fff;
      ul{
        list-style: none;
      }
    }

    .bfb_value{
      position: absolute;
      top: 75px;
      left: 142px;
      line-height: 16px;
      font-size: 13px;
      color: #a7c5ec;
      ul{
        list-style: none;
      }
    }

    .bx_bor{
      position: absolute;
      top: 94px;
      left: 7px;
      width: 110px;
      height: 136px;
      border: 1px dashed #35598a;
      border-right:none;border-bottom:none;
    }

    .sfjs_title{
      margin-left: 50px;
      width: 435px;
      font-weight: 800;
      font-size: 21px;
      height: 40px;
      background-image: linear-gradient(#e3edf1, #ffffff, #36caff, #00a0ff);
      background-clip: text;
      color: transparent;
    }

    #ysssbar{
      width: 523px;
      height: 233px;
    }

    #phbar{
      width: 523px;
      height: 260px;
    }

  .mrg_15{
    margin-left: 16px;
  }
</style>
